<template>
  <div class="login-container">
    <div class="login-head"></div>
    <el-form class="login-form" ref="loginForm" :model="user" :rules="loginRules">
      <el-form-item prop="mobile">
        <el-input placeholder="请输入手机号" v-model="user.mobile"></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input placeholder="请输入验证码" v-model="user.code"></el-input>
      </el-form-item>
      <el-form-item size="large">
        <el-checkbox v-model="user.isAgree"></el-checkbox>我已阅读并同意用户协议
      </el-form-item>
      <el-form-item size="large"  prop="isAgree">
        <el-button class="login-btn" type="primary" :loading="loginLoading" @click="onLogin">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {login} from "@/api/user"


export default {
  name: "LoginIndex",
  components: {},
  props: {},
  data() {
    return {
      user: {
        mobile: "13911111111", // 手机号
        code: "111111", // 验证码
        isAgree:false
      },
      loginRules: {
        // 登录表单验证规则
        mobile: [
            {required: true, message: "请输入手机号", trigger: "blur" },
            {pattern: /^1[3,5,7,9]\d{9}$/,message: "请输入正确的手机号",trigger: "blur"}
        ],
        code: [
            { required: true, message: "验证码不能为空", trigger: "blur" },
            {pattern:/^\d{6}$/,message: "请输入正确的验证码格式",trigger: "blur"}
            ],
        isAgree: [
            {   // 自定义校验规则
                validator: (rule,value,callback) => {
                    if(value){
                        callback()
                    }else{
                        callback(new Error("请勾选用户协议"))
                    }
            },
            // message: '请勾选同意用户协议',
            trigger: "blur"
            }
        ]
      },
      loginLoading: false // 登录按钮加载状态
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onLogin() {
        // console.log()
        // 获取表单数据
        //   const user = this.user;
      // 表单验证
      this.$refs['loginForm'].validate(valid =>{
          if(!valid){
              return this.$message.error("请检查输入");
          }
          // 验证通过
          this.login()
      } )
    },
    login () {
      // 按钮加载
      this.loginLoading = true;
      // 验证通过，提交登录
      login(this.user)
        .then(res => {
          //   console.log(res);
          // 登录成功
          this.$message({
            message: "登录成功",
            type: "success"
          });
          this.loginLoading = false;
          //  存储token令牌至本地,本地存储只能存储字符串,如果需要存储对象\数组,则转为json格式
          window.localStorage.setItem('user',JSON.stringify(res.data.data))
          // 跳转到首页
          this.$router.push({
              name: 'home'
          })
        })
        .catch(err => {
          //   console.log("登录失败", err);
          // 登录失败
          this.$message.error("手机号或密码错误");
          this.loginLoading = false;
        });
    }
  }
};
</script>

<style scoped lang="less">
.login-container {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("./login_bg.png") no-repeat;
  background-size: cover;
  .login-head {
    width: 100%;
    height: 88px;
    background: url("./logo.png") no-repeat;
  }
}
.login-form {
  background: #ffffff;
  padding: 50px;
  min-width: 300px;
  .login-btn {
    width: 100%;
  }
}
</style>
